<template>
	<view class="yp" :class="{'theme--Black':CurrentTheme.name==='DarkMode'}">
		<app-headers></app-headers>
		<view class="box">
			<div class="input-box">
				<text class="cuIcon-search" @click="onScan"></text>
				<view class="relative wid1p">
					<input class="input-inp wid1p" v-model="SearchContent" placeholder="搜索发布内容" @input="toSerch" />
					<text class="cuIcon-close right-center" @click="CloseSearchContent" v-show="SearchContent.length>0"></text>
				</view>
			</div>
			<!-- <view class="icon-circle" @click="onShowTransfer"><text class="cuIcon-order"></text></view> -->


			<!-- 通知入口 -->
			<view class="Notice" @click.stop="GoNotice" :style="{top:FiexTop}">
				<u-badge v-show="!IsShowTop" size="mini" type="error" :count="NoticeCount" style="right: 10rpx;"></u-badge>
				<text :class="IsShowTop?'cuIcon-top':'cuIcon-mail'"></text>
			</view>

			<!-- 发布小菜单 -->
			<view class="relative ml20">
				<view class="icon-circle"><text class="cuIcon-add" @click="showSortMenu(true)"></text></view>
				<view class="H5-Mask" @touchmove.stop.prevent="H5_Mask_Move" @click="H5_Mask_Cancel" v-if="H5_Mask"></view>
				<view class="sort-memu" v-if="sortMemu_show">
					<view class="listitem flex ali-sta" @click="onPush('name', j)" v-for="(i, j) in PushList" :key="j" :class="i.isActive ? 'fo-blue' : ''">
						<text :class="i.icon" class="mr20"></text>
						<text>{{ i.name }}</text>
					</view>
				</view>
			</view>
		</view>

		<contents ref="contents"></contents>

		<!-- 点击更多弹窗 -->
		<DropDown :isShow_H5_Mask.sync="isShow_H5_Mask" position="bottom" :isMask="true">
			<view slot="content" class="bottom-list">
				<view class="bottom-list-item" @click="onDownload">
					<text class="cuIcon-message" style="background-color: #60eff1;"></text>
					<text class="mt20">私聊</text>
				</view>
				<view class="bottom-list-item">
					<text class="cuIcon-friendadd bg-Orange"></text>
					<text class="mt20">关注</text>
				</view>
				<view class="bottom-list-item" @click="onDelte">
					<text class="cuIcon-warn bg-OrangeRed"></text>
					<text class="mt20">举报</text>
				</view>
				<view class="bottom-list-item" @click="isShow_H5_Mask = false">
					<text class="cuIcon-close bg-Snow"></text>
					<text class="mt20">取消</text>
				</view>
			</view>
		</DropDown>

		<!-- 点击分享弹窗 -->
		<!-- <share-dialog :isShow_H5_Mask.sync="isShow_H5_Mask"></share-dialog> -->
		<DropDown :isShow_H5_Mask.sync="ShareDialog_Mask" position="bottom" :isMask="true">
			<view slot="content" class="bottom-list flex flex-col ali-cen">
				<view class="bg-White flex wid1p padd30" style="overflow: scroll;">
					<view class="bottom-list-item" @click="onShare('weixin')">
						<text class="cuIcon-message bg-DarkTurquoise"></text>
						<text class="mt20">微信</text>
					</view>
					<view class="bottom-list-item" @click="onShare('weixin')">
						<text class="cuIcon-friendadd bg-Orange"></text>
						<text class="mt20">朋友圈</text>
					</view>
					<view class="bottom-list-item" @click="$pub.Toast('聊天模块待开发种~')">
						<text class="cuIcon-warn bg-OrangeRed"></text>
						<text class="mt20">盘友</text>
					</view>
					<view class="bottom-list-item" @click="onShare('qq')">
						<text class="cuIcon-close bg-Snow"></text>
						<text class="mt20">QQ</text>
					</view>
					<view class="bottom-list-item" @click="onShare('qq_zoom')">
						<text class="cuIcon-close bg-Snow"></text>
						<text class="mt20">QQ空间</text>
					</view>
					<view class="bottom-list-item" @click="onShare('xinlang')">
						<text class="cuIcon-close bg-Snow"></text>
						<text class="mt20">新浪</text>
					</view>
				</view>
				<view style="backgroundColor:#dbdbdb; height: 16rpx;width: 100%;"></view>
				<view class="mt20 bg-White padd30 wid1p text-center" @click="ShareDialog_Mask = false">取消</view>
			</view>
		</DropDown>

		<!-- 占位---下弹窗隐藏显示占位（tabar） -->
		<!-- <view style="height:50px; width: 100%; position: fixed; bottom: 0;" v-if="isShow_H5_Mask || ShareDialog_Mask"></view> -->
	</view>
</template>

<script>
	const {
		windowWidth,
		windowHeight
	} = uni.getSystemInfoSync();
	import contents from './conpoment/content.vue';
	import DropDown from '../public/DropDownPopup.vue';
	import ShareDialog from '@/components/ShareDialog/index.vue';
	import {
		API$SelArticle_like
	} from '@/common/API/community.js';
	import {
		API$SelNoReadNoticeCount
	} from '@/common/API/notice.js'
	export default {
		name: '',
		components: {
			contents,
			DropDown,
			ShareDialog
		},
		data() {
			return {
				isShow_H5_Mask: false, // DropDownPopup是否显示(文件操作栏)
				ShareDialog_Mask: false, // 分享弹窗

				H5_Mask: false, // 遮罩层
				sortMemu_show: false, // 是否显示排序菜单
				PushList: [{
						name: '发图文',
						icon: 'cuIcon-cuIcon',
						type: 'size',
						isActive: false
					},
					{
						name: '发视频',
						icon: 'cuIcon-all',
						type: 'name',
						isActive: false
					},
					{
						name: '发语音',
						icon: 'cuIcon-countdown',
						type: 'time',
						isActive: false
					}
				],

				SearchContent: '', // 搜索内容

				ShareData: '', // 要被分享的文章数据
				NoticeCount: 0, // 通知统计

				FiexTop: windowHeight * 0.9 + 'px',

				IsShowTop: false // 是否却换成回到顶部图标
			};
		},
		watch: {
			isShow_H5_Mask() {
				this.isShow_H5_Mask === false ? uni.showTabBar({
					animation: true
				}) : '';
			},
			ShareDialog_Mask() {
				if (this.ShareDialog_Mask === false) {
					uni.showTabBar({
						animation: true
					});
					this.ShareData = null; // 隐藏分享框的时候清空要被分享的文章
				}
			}
		},
		onReady() {
			this.getNoticeCount()
		},
		onShow() {
			// #ifdef APP-PLUS
			//设置导航栏前景色
			this.$nextTick(()=>plus.navigator.setStatusBarStyle(this.CurrentTheme.name==='DarkMode'?'light':"dark"))
			// #endif
			this.getNoticeCount()
		},
		onLoad() {
			console.log(windowHeight)
			// 监听底部操作栏是否显示
			uni.$on('$onCommunity', res => {
				let {
					type
				} = res
				switch (type) {
					case 'onMore':
						this.isShow_H5_Mask = res.isShow
						break;
					case 'onShare':
						this.ShareDialog_Mask = res.isShow;
						this.ShareData = res.data;
						break;
					case 'onFreshNotice':
						this.getNoticeCount()
						break;
					case 'ChangeTopIcon':
						this.IsShowTop = res.isShowTop ? true : false
						
						break;
				}
			});
		},
		onUnload() {
			uni.$off('$onCommunity')
		},
		methods: {
			// 显示传输记录弹窗
			onShowTransfer() {
				// this.isShowTransfer = true
				uni.navigateTo({
					url: '/pages/public/TransferPopup/index'
				});
			},
			// 显示发布悬浮菜单栏
			showSortMenu(bool) {
				this.H5_Mask = bool;
				this.sortMemu_show = this.H5_Mask;
			},
			// 阻止遮罩层滑动的默认行为
			H5_Mask_Move() {
				return;
			},
			// 关闭悬浮菜单的遮罩层
			H5_Mask_Cancel() {
				this.showSortMenu(false);
			},
			// 显示操作栏弹窗
			onMore(e) {
				this.isShow_H5_Mask = true;
			},
			// 打开发布图片页面
			onPush(e, index) {
				this.sortMemu_show = false;
				this.H5_Mask = false;

				switch (this.PushList[index].name) {
					case '发图文':
						this.$pub.naviTo('/pages/community/PImgText');
						break;
					case '发视频':
						this.$pub.naviTo('/pages/community/PVideoText');
						break;
					case '发语音':
						this.$pub.naviTo('/pages/community/PAudioText');
						break;
				}
			},
			// 关闭搜索
			async CloseSearchContent() {
				this.SearchContent = '';
				this.toSerch();
			},
			// 搜索
			async toSerch() {
				if (this.SearchContent === '') return;
				let selJson = JSON.parse(JSON.stringify(this.$refs.contents.SelJson));
				let {
					code,
					msg,
					data
				} = await API$SelArticle_like(Object.assign({
					content: this.SearchContent
				}, selJson));
				if (code === 200) {
					this.$refs.contents.ChangeData_list(data);
					console.log(this.SearchContent);
				}
			},
			// 跳转通知页面
			GoNotice() {
				if (this.IsShowTop) {
					console.log(this.$refs.contents.backToTop())
				} else {
					this.$pub.naviTo('/pages/community/noticeCenter/index')
				}

			},
			// 文章分享
			onShare(type) {
				console.log(type);
				// #ifdef H5
				if (!window.plus) return this.$pub.Toast('H5版本暂不支持分享功能');
				// #endif

				// #ifdef APP-PLUS
				let provider = null,
					scene = null
				let imageUrl = this.ShareData.imgList.length > 0 ? this.ShareData.imgList[0].tempFileURL : null;
				let summary = this.ShareData.contents
				if (type == 'weixin') {
					return this.$pub.Toast('微信分享要企业级认证 暂没法做~');
					provider = 'weixin'
					scene = 'WXSceneSession'
					// 分享 文字
					uni.share({
						provider,
						scene,
						type: 1,
						summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
					// 分享 图片
					// 分享 图文
					uni.share({
						provider,
						scene,
						type: 0,
						href: 'http://uniapp.dcloud.io/',
						title: '洋盘分享',
						summary: this.ShareData.contents,
						imageUrl,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else if (type == 'xinlang') {
					return this.$pub.Toast('微博分享要上级成功后才可 暂没法做~');
					uni.share({
						provider: 'sinaweibo',
						type: 0,
						href: 'https://static-1d54e049-f81e-427d-a517-62137322ac07.bspapp.com/',
						title: '66',
						summary: '吃啥',
						mageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							uni.showToast({
								title: '分享失败',
								icon: 'none',
								duration: 2000
							});
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else if (type == 'qq') {
					return this.$pub.Toast('QQ分享要上级成功后才可 暂没法做~');
					console.log(66)
					provider = 'qq'
					uni.share({
						provider,
						type: 0,
						href: 'https://static-1d54e049-f81e-427d-a517-62137322ac07.bspapp.com/',
						title: '66',
						summary: '吃啥',
						mageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							uni.showToast({
								title: '分享失败',
								icon: 'none',
								duration: 2000
							});
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}
				// #endif
			},

			/************************************************数据接口部分********************************************************/
			async getNoticeCount(json) {
				let {
					code,
					msg,
					total
				} = await API$SelNoReadNoticeCount(json)
				if (code === 200) {
					this.NoticeCount = total
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.yp {
		/* #ifdef H5 */
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif */
		overflow: scroll;
	}

	.theme--Black {
		/deep/ .box .input-box {
			background-color: gray;
			color: #ffffff;
			// input::-webkit-input-placeholder {
			// 	color: #fff;
			// }
			// input::-moz-input-placeholder {
			// 	color: #fff;
			// }
			// input::-ms-input-placeholder {
			// 	color: #fff;
			// }
		}

		/deep/ .icon-circle {
			background-color: gray;
			color: #ffffff;
		}
	}


	.box {
		padding: 10px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.input-box {
			padding: 8rpx 40rpx;
			width: 70%;
			height: 30px;
			border-radius: 50px;
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			flex: 1;

			.input-inp {
				border: none;
				background-color: inherit;
				margin-left: 4px;
				font-size: 14px;
			}
		}
	}

	// 排序菜单 + 遮罩层
	.sort-memu {
		z-index: 99999;
		background-color: #ffffff;
		position: absolute;
		left: -230rpx;
		top: 90rpx;
		box-shadow: -1px 1px 2px 0px #eee, inset -1px 1px 2px 0px #eee;
		border-radius: 10rpx;

		.listitem {
			justify-content: flex-start;
			width: 300rpx;
			padding: 30rpx;
			box-shadow: 0px 1px #f1f1f1;
		}
	}

	.H5-Mask {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.1);
		z-index: 99998;
	}

	// 操作栏弹窗列
	.bottom-list {
		display: flex;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 50%;

		// height: 200rpx;
		.bottom-list-item {
			flex: 1;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #000;

			text[class^='cuIcon-'] {
				border-radius: 50%;
				height: 100rpx;
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 50rpx;
				color: #000;
			}
		}
	}


	// 通知图标
	.Notice {
		position: fixed;
		right: 4%;
		// top: 1200rpx;
		height: 100rpx;
		width: 100rpx;
		padding: 40rpx;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0px 0px 8px 0px #dcd9d9;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
		color: black;
	}


	/deep/ .DropDown_bottom {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
</style>
